<template>
  <div class="content">
    <TabSwitcher :tabs="['错题集', '收藏夹']" @tab-change="handleTabChange">
      <template #tab-0>
        <div class="gather">
          <!-- flex flex-justify-center flex-align-center flex-column -->
          <div class="gather_header flex flex-justify-between">
            <div class="today_gather cursor_pointer" @click="toDayWrong">
              <div class="flex flex-align-center marB20">
                <div class="font20">今日错题</div>
                <el-icon color="#ccc" size="18">
                  <ArrowRightBold />
                </el-icon>
              </div>
              <img src="@/assets/img/clear.png" alt="" class="clearImg" @click.stop="clear('1')">
              <div class="question_num">{{ todayData.questionNum ? todayData.questionNum : '0' }}</div>
              <img src="../../assets/img/today.png" class="todayImg" alt="">
            </div>
            <div class="today_gather cursor_pointer" @click="toWrongReview">
              <div class="flex flex-align-center marB20">
                <div class="font20">错题回顾</div>
                <el-icon color="#ccc" size="18">
                  <ArrowRightBold />
                </el-icon>
              </div>
              <!-- <img src="@/assets/img/clear.png" alt="" class="clearImg" @click.stop="clear('1')"> -->
              <!-- <div class="question_num"></div> -->
              <img src="../../assets/img/today.png" class="todayImg" alt="">
            </div>
            <div class="all_gather cursor_pointer flex flex-justify-center flex-align-center flex-column"
              @click="toAllWrong">
              <div class="flex flex-align-center marB20">
                <div class="font20">全部错题</div>
                <el-icon color="#ccc" size="18">
                  <ArrowRightBold />
                </el-icon>
              </div>
              <img src="@/assets/img/clear.png" alt="" class="clearImg" @click.stop="clear('2')">
              <div class="question_num">{{ allData.questionNum ? allData.questionNum : '0' }}</div>
              <img src="../../assets/img/all.png" class="allImg" alt=""></img>
            </div>
          </div>
        </div>
        <!-- <div class="gather_body">
          <div class="flex flex-align-center flex-justify-between">
            <div class="flex flex-align-center">
              <div class="tips">错题详情</div>
              <img src="@/assets/img/tongbu.png" alt="" class="iconPic marL20" />
              <div class="marL10 cogradient">同步完成 2025.05.27 15:03</div>
            </div>
            <div class="flex flex-align-center">
              <div class="flex flex-align-center cursor_pointer" @click="removeModel = true">
                <el-icon size="35">
                  <Setting />
                </el-icon>
                <div class="font35 marL20">移出设置</div>
              </div>
              <div class="flex flex-align-center marL40 cursor_pointer" @click="clearModel = true">
                <el-icon size="35">
                  <Delete />
                </el-icon>
                <div class="font35 marL20">清空记录</div>
              </div>
            </div>
          </div>
          <div class="flex flex-align-center flex-justify-between marT50">
            <div class="flex flex-align-center cursor_pointer">
              <img src="@/assets/img/yct.png" alt="" class="yct" />
              <div class="marL15 font30">高频易错题，提分必做</div>
            </div>
            <div class="flex flex-align-center cursor_pointer">
              <div class="f25 cogradient marR10">马上去做</div>
              <el-icon color="#ddd" size="20">
                <ArrowRightBold />
              </el-icon>
            </div>
          </div>
          <div class="list">
            <div
              class="list_item flex flex-align-center flex-justify-between marT80 cursor_pointer"
              v-for="(item, index) in yctList"
              :key="index"
            >
              <div class="flex flex-align-center">
                <div class="circle">{{ index + 1 }}</div>
                <div class="marL20 list_title">{{ item.title }}</div>
              </div>
              <div class="flex flex-align-center">
                <div class="f30 marR10">{{ item.yctNum }}</div>
                <el-icon color="#ddd" size="20"><ArrowRightBold /></el-icon>
              </div>
            </div>
          </div>
        </div> -->
      </template>
      <template #tab-1>
        <div class="gather">
          <div class="gather_header flex flex-justify-between">
            <div class="today_gather cursor_pointer flex flex-justify-center flex-align-center flex-column"
              @click="toDayCollection">
              <div class="flex flex-align-center marB20">
                <div class="font20">今日收藏</div>
                <el-icon color="#ccc" size="18">
                  <ArrowRightBold />
                </el-icon>
              </div>
              <img src="@/assets/img/clear.png" alt="" class="clearImg" @click.stop="clear('3')">
              <div class="question_num">{{ todayData.questionNum ? todayData.questionNum : '0' }}</div>
              <img src="../../assets/img/today.png" class="todayImg" alt="">
            </div>
            <div class="all_gather cursor_pointer flex flex-justify-center flex-align-center flex-column"
              @click="toAllCollection">
              <div class="flex flex-align-center marB20">
                <div class="font20">全部收藏</div>
                <el-icon color="#ccc" size="18">
                  <ArrowRightBold />
                </el-icon>
              </div>
              <img src="@/assets/img/clear.png" alt="" class="clearImg" @click.stop="clear('4')">
              <div class="question_num">{{ allData.questionNum ? allData.questionNum : '0' }}</div>
              <img src="../../assets/img/all.png" class="allImg" alt=""></img>
            </div>
          </div>
        </div>
        <!-- <div class="gather_body">
          <div class="flex flex-align-center flex-justify-between">
            <div class="flex flex-align-center">
              <div class="tips">收藏详情</div>
              <img src="@/assets/img/tongbu.png" alt="" class="iconPic marL20" />
              <div class="marL10 cogradient">同步完成 2025.05.27 15:03</div>
            </div>
            <div class="flex flex-align-center marL40 cursor_pointer" @click="clearModel = true">
              <el-icon size="35">
                <Delete />
              </el-icon>
              <div class="font35 marL20">清空记录</div>
            </div>
          </div>
          <div class="flex flex-align-center flex-justify-between marT50">
            <div class="flex flex-align-center cursor_pointer">
              <img src="@/assets/img/sct.png" alt="" class="yct" />
              <div class="marL15 font30">最多收藏题，考前必看</div>
            </div>
            <div class="flex flex-align-center cursor_pointer">
              <div class="f25 cogradient marR10">马上去看</div>
              <el-icon color="#ddd" size="20">
                <ArrowRightBold />
              </el-icon>
            </div>
          </div>
          <div class="list">
            <div class="list_item flex flex-align-center flex-justify-between marT80 cursor_pointer"
              v-for="(item, index) in yctList" :key="index">
              <div class="flex flex-align-center">
                <div class="circle">{{ index + 1 }}</div>
                <div class="marL20 list_title">{{ item.title }}</div>
              </div>
              <div class="flex flex-align-center">
                <div class="f30 marR10">{{ item.yctNum }}</div>
                <el-icon color="#ddd" size="20">
                  <ArrowRightBold />
                </el-icon>
              </div>
            </div>
          </div>
        </div> -->
      </template>
    </TabSwitcher>
  </div>
  <el-dialog v-model="clearModel" width="40%" :before-close="handleClose" :close-on-click-modal="false"
    :style="{ borderRadius: '10px', paddingBottom: '40px', border: '2px solid #d9d9d9' }">
    <div class="prompt">温馨提示</div>
    <div class="f40">
      {{ tabIndex == 0 ? '您确定要清空所有错题吗？' : '您确定要清空所有收藏吗？' }}
    </div>
    <template #footer>
      <div class="dialog-footer flex flex-align-center flex-justify-center">
        <div @click="clearModel = false" class="cancel cursor_pointer">取消</div>
        <div @click="confrim" class="sure marL30 cursor_pointer">清空</div>
      </div>
    </template>
  </el-dialog>
  <el-dialog v-model="removeModel" width="40%" :before-close="removeClose" :close-on-click-modal="false"
    :style="{ borderRadius: '10px', paddingBottom: '40px' }" class="removeDialog">
    <div class="prompt">移出设置</div>
    <div class="removeTitle">答对不自动移出错题</div>
    <div>
      <div v-for="(item, index) in removeList" :key="index" class="remove_item cursor_pointer"
        :class="{ active_item: removeIndex === index }" @click="removeSelect(index)">
        {{ item }}
      </div>
    </div>
    <template #footer>
      <div class="flex flex-justify-center marT40">
        <div @click="removeSure" class="sure cursor_pointer">确定</div>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import TabSwitcher from '@/components/tabbar/TabSwitcher.vue'
import './dialog.scss'
import { onMounted, reactive, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowRightBold, Setting, Delete } from '@element-plus/icons-vue'
import { getDailyStatistics, clearBytype } from '@/api/userApi'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()
// 数据
const yctList = reactive([
  {
    title: '驾驶证和机动车管理规定',
    yctNum: '4题',
  },
  {
    title: '道路通行条件及通行规定',
    yctNum: '0题',
  },
  {
    title: '道路交通安全违法行为及处罚',
    yctNum: '0题',
  },
  {
    title: '道路交通事故处理相关规定',
    yctNum: '0题',
  },
  {
    title: '机动车基础知识',
    yctNum: '0题',
  },
])
// 今日错题
const today_wrong_num = ref(1)
// 全部错题
const all_wrong_num = ref(2)
//今日收藏
const today_sc = ref(3)
//全部收藏
const all_sc = ref(4)
// tab切换下标
const tabIndex = ref(0)
// 清空弹框
const clearModel = ref(false)
// 移出弹框
const removeModel = ref(false)
// 移出下标
const removeIndex = ref(0)
// 移出设置
const queryType = ref('01')
const removeList = reactive(['不移出', '1', '2', '3', '4', '5'])
const handleTabChange = (index: number) => {
  console.log('切换到标签:', index)
  tabIndex.value = index
  if (index == 0) {
    queryType.value = '01'
  } else {
    queryType.value = '02'
  }
  getWrongData()
}
const handleClose = () => {
  clearModel.value = false
}
const removeClose = () => {
  removeModel.value = false
}
const confrim = () => {
  if (tabIndex.value == 0) {
    today_wrong_num.value = 0
    all_wrong_num.value = 0
  } else {
    today_sc.value = 0
    all_sc.value = 0
  }
  clearModel.value = false
}
const removeSelect = (i: number) => {
  removeIndex.value = i
}
const removeSure = () => {
  removeModel.value = false
  removeIndex.value = 0
}

const wrongQuestion = ref([])
const collection = ref([])
const todayData = ref<any>({})
const allData = ref<any>({})
const getWrongData = async () => {
  try {
    let obj = {
      carModelId: userStore.storeInfo.carModelId,
      categoryId: userStore.categoryId,
      id: userStore.storeInfo.memberId,
      type: queryType.value
    }
    const res = await getDailyStatistics(obj)
    if (res.code === '00000' && res.data) {
      todayData.value = res.data.find((item: any) => item.type === 'day') || {}
      allData.value = res.data.find((item: any) => item.type === 'all') || {}
      console.log(todayData.value, "todayData.value");
      console.log(allData.value, "allData.value");
    }
  } catch {
  } finally {
  }
}
const toAllWrong = () => {
  if (!allData.value.wxQuestionList.length) {
    ElMessage.error('当前没有错题')
  } else {
    router.push({
      path: 'wrong',
      query: { type: 'all' }
    })
  }
}
const toDayWrong = () => {
  if (!todayData.value.wxQuestionList.length) {
    ElMessage.error('今日没有错题')
  } else {
    router.push({
      path: 'wrong',
      query: { type: 'today' }
    })
  }
}
const toAllCollection = () => {
  if (!allData.value.wxQuestionList.length) {
    ElMessage.error('当前没有收藏题目')
  } else {
    router.push({
      path: 'collection',
      query: { type: 'all' }
    })
  }
}
const toDayCollection = () => {
  if (!todayData.value.wxQuestionList.length) {
    ElMessage.error('今日没有收藏题目')
  } else {
    router.push({
      path: 'collection',
      query: { type: 'today' }
    })
  }
}
const clear = async (e: any) => {
  console.log(e, "e===");

  let obj = {
    memberId: userStore.storeInfo.memberId,
    type: (e === '1' || e === '2') ? '03' : '02',
    day: (e === '1' || e === '3') ? '1' : '0'
  }
  const res = await clearBytype(obj)
  if (res.code === '00000') {
    ElMessage.success('清除成功')
    getWrongData()
  }
}

const toWrongReview = () => {
  router.push({ path: '/wrongReview' })
}
onMounted(() => {
  getWrongData()
})
</script>
<style scoped lang="scss">
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.content {
  min-height: 100%;
}

.gather {
  padding: rem(40) rem(185) rem(20);
}

.today_gather,
.all_gather {
  padding: rem(25) 0;
  width: 30%;
  height: rem(180);
  border-radius: rem(8);
  box-shadow: 0px rem(16) rem(48) rem(16) rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  position: relative;

  .clearImg {
    width: rem(25);
    height: rem(25);
    position: absolute;
    right: rem(10);
    top: rem(10);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &:hover {
    transform: translateY(rem(-10));
    cursor: pointer;

    .clearImg {
      opacity: 1;
      visibility: visible;
    }
  }

  .todayImg,
  .allImg {
    position: absolute;
    width: rem(100);
    height: rem(100);
    bottom: rem(10);
    right: rem(20);

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.font20 {
  color: #999999;
  font-size: rem(20);
  font-weight: 600;
}

.question_num {
  font-size: rem(60);
  color: #4a4a4a;
}

.gather_body {
  padding: rem(40) rem(225) 0;
}

.iconPic {
  width: rem(20);
  height: rem(20);
}

.tips {
  color: #333;
  font-size: rem(40);
  font-weight: bold;
}

.cogradient {
  font-size: rem(25);
  color: #999;
}

.font35 {
  font-size: rem(35);
  color: #4a4a4a;
}

.yct {
  width: rem(103);
  height: rem(36);
}

.font30 {
  font-size: rem(30);
  color: #4a4a4a;
}

.circle {
  width: rem(30);
  height: rem(30);
  border-radius: 50%;
  text-align: center;
  line-height: rem(30);
  color: #fff;
  background-color: #ff6e2d;
  box-shadow: 0 rem(2) rem(6) #ff6e2d;
}

.f30 {
  color: #999;
  font-size: rem(30);
}

.list_title {
  font-size: rem(30);
  color: #4a4a4a;
}

.marT80 {
  margin-top: rem(80);
}

.prompt {
  font-size: rem(50);
  color: #333;
  font-weight: bold;
  margin-left: rem(40);
}

.f40 {
  font-size: rem(40);
  color: #333;
  margin: rem(200) 0 rem(130) rem(60);
  text-align: center;
}

.cancel,
.sure {
  width: rem(400);
  height: rem(100);
  border-radius: rem(50);
  text-align: center;
  line-height: rem(100);
  font-size: rem(40);
}

.cancel {
  background-color: #fff;
  color: #32c45d;
  border: 2px solid #32c45d;
}

.sure {
  background-color: #32c45d;
  color: #fff;
}

.removeTitle {
  margin-top: rem(40);
  font-size: rem(35);
  text-align: center;
  color: #333;
  margin-bottom: rem(30);
}

.remove_item {
  text-align: center;
  font-size: rem(30);
  height: rem(80);
  line-height: rem(80);
  color: #333;
}

.active_item {
  background-color: #eaf9ee;
}
</style>
